﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Easyui扩展库 进度条 - 落阳 整理</title>
    <link href="http://www.easyui-extlib.com/Content/Site.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery/jquery-1.11.0.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-extensions/jquery.jdirk.js"></script>
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/default/easyui.css" rel="stylesheet" />
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/icon.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/progressbar/jeasyui.extensions.progressbar.setText.js"></script>
    <script>
        $(function () {
            var timeoutId;
            $("#btnBegin").click(function () {
                var pro = $("#p"), value = pro.progressbar("getValue");
                value += 1;
                var adding = function (newValue) {
                    //console.log("进度：" + newValue + "，上次定时器id：" + timeoutId);
                    if (newValue < 100) {
                        pro.progressbar("setValue", newValue);
                        newValue += 1;
                        timeoutId = $.util.delay(function () { adding(newValue) }, 1000);
                    } else {
                        pro.progressbar("setValue", newValue);
                        pro.progressbar("setText", "完成");
                    }
                };

                timeoutId = $.util.delay(function () { adding(value); });
            });

            $("#btnStop").click(function () {
                window.clearInterval(timeoutId);
            });

            $("#btnReset").click(function () {
                $("#p").progressbar("setValue", 90);
                $("#p").progressbar("setText", "90%");
            });

        });
    </script>
</head>
<body>
    <div class="easyui-panel" data-options="fit:true,border:false" style="padding:20px;">
        <div id="p" class="easyui-progressbar" data-options="value:90" style="width:400px;"></div>
        <br />
        <a id="btnBegin" class="easyui-linkbutton" data-options="iconCls:'icon-add'">开始加载，每秒增加1%，100%后，显示文本“完成”</a>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <a id="btnStop" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">暂停加载”</a>
        <br /><br />
        <a id="btnReset" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">重置进度条</a>
    </div>
</body>
</html>
